<template>
  <a-modal :width="800" :title="title" zIndex="9999" v-model="visible" :destroyOnClose="true" :footer="null">
    <div style="margin-bottom: 10px">
      <a-input-search
        placeholder="输入昵称搜索"
        v-model="name"
        allowClear
        enter-button
        @search="$refs.table.refresh(true)"
      />
    </div>
    <s-table ref="table" rowKey="id" :columns="manager" :data="loadData">
      <span slot="pic" slot-scope="text, record">
        <a-avatar shape="square" :size="48" icon="user" :src="record.pic_url" />
      </span>

      <span slot="baseinfo" slot-scope="text, record">
        <a-tooltip>
          <template slot="title"> {{ record.name }} </template>
          <span>{{ record.name }}</span>
        </a-tooltip>
      </span>

      <span slot="action" slot-scope="text, record">
        <a-button type="primary" size="small" @click="onSelect(record)"> 选择 </a-button>
      </span>
    </s-table>
  </a-modal>
</template>

<script>
import { frontAgentGoodsList } from '@/api/daili.js'
import { STable } from '@/components'

const manager = [
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: '头像',
    scopedSlots: { customRender: 'pic' },
  },
  {
    title: '商品名称',
    scopedSlots: { customRender: 'baseinfo' },
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' },
    width: 100,
  },
]
export default {
  components: {
    STable,
  },

  props: {
    title: {
      type: String,
      default: '选择产品',
    },
  },

  data() {
    return {
      visible: false,
      name: '',
      manager,
      // 选择用户数据加载
      loadData: (parameter) => {
        return frontAgentGoodsList({
          ...parameter,
          goods_name: this.name,
        }).then((res) => {
          if (res.data && res.data.list) {
            res.data.data = res.data.list
          }

          return res.data
        })
      },

      addressList: [],
    }
  },
  created() {},
  computed: {},

  methods: {
    onSelect(e) {
      this.visible = false
      this.$emit('select', e)
    },
  },
}
</script>
<style lang="less" scoped></style>
